<template>
  <div class="exam-detail">
    <div class="head" v-if="!isdetail">
      <h1>{{ detailData.fullName }}</h1>
      <p>
        <span>总分：{{ detailData.examTask.score || 0 }}</span>
        <span>及格线：{{ detailData.passLine }}</span>
        <span
          >切屏次数： {{ detailData.preventionToggleScreen || "无限次" }}</span
        >
        <span>总时长： {{ detailData.examLength }}分钟</span>
        <span>若有主观题，系统不支持自动判分</span>
      </p>
    </div>
    <div class="head head2" v-else>
      <h1>{{ detailData.fullName }}</h1>
      <p>
        <span>试卷总分：{{ detailData.examTask.score || 0 }}</span>
        <span>及格分数：{{ detailData.passLine }}</span>
        <span>本次考试得分： {{ detailData.examTask.myScore }}</span>
        <span
          >考试用时：
          {{
            (detailData.examTask.submitTime - detailData.examTask.startTime) /
              60000 >
            30
              ? 30
              : detailData.examTask.submitTime - detailData.examTask.startTime
          }}分钟</span
        >
        <!-- <span>参与次数：</span> -->
        <!-- <span>考试用时： {{ detailData.examLength }}分钟</span> -->
        <span
          >本次考试状态：
          {{
            detailData.examTask.myScore < detailData.passLine
              ? "不及格"
              : "及格"
          }}</span
        >

        <span
          >提交时间：
          {{ timestampToDateTime(detailData.examTask.submitTime) }}</span
        >
      </p>
    </div>
    <div class="content">
      <div class="questionsList">
        <div class="box" v-for="(item, idx) in list" :key="idx">
          <div class="headline">
            <span class="classify">{{ han(idx + 1) }}、{{ item.type }}</span>
            <span class="score">（ 本大题共{{ item.list.length }}小题 ）</span>
          </div>
          <div
            class="questions-item"
            v-for="(item2, idx2) in item.list"
            :key="idx2"
            :id="`que${idx}${idx2}`"
          >
            <radioT
              v-if="item.type == '单选题'"
              :item="item2"
              @changeres="changeres"
              :index="idx2"
              :isdetail="isdetail"
            ></radioT>
            <tiankong
              v-if="item.type == '填空题'"
              :item="item2"
              :index="idx2"
              :isdetail="isdetail"
            ></tiankong>
            <radiod
              v-if="item.type == '多选题'"
              :item="item2"
              @changeres="changeres"
              :index="idx2"
              :isdetail="isdetail"
            ></radiod>

            <determine
              v-if="item.type == '判断题'"
              :item="item2"
              @changeres="changeres"
              :index="idx2"
              :isdetail="isdetail"
            ></determine>
            <answers
              v-if="item.type == '问答题'"
              :item="item2"
              @changeres="changeres"
              :index="idx2"
              :isdetail="isdetail"
            ></answers>
          </div>
        </div>
      </div>

      <div class="sidebar">
        <div class="topTime" v-if="!isdetail">
          <h1>剩余时间</h1>

          <h1
            style="
              font-size: 36px;
              color: #f65464;
              letter-spacing: 1px;
              font-weight: 700;
            "
          >
            {{ time }}
          </h1>
        </div>
        <div class="dati">
          <h1>答题卡</h1>

          <div class="jindu" v-if="!isdetail">
            <el-progress
              :percentage="
                (actNum / detailData.examTask.temsexamtaskresultList.length) *
                100
              "
              :format="format"
            ></el-progress>
          </div>

          <div class="shiyi">
            <div class="shiItem shiItem1"><span></span> 已答</div>
            <div class="shiItem shiItem2"><span></span> 未答</div>
            <div class="shiItem shiItem3" v-if="!isdetail">
              <span></span> 标记
            </div>
          </div>

          <div class="sheet-list">
            <div class="box" v-for="(item, idx) in list" :key="idx">
              <div class="headline">
                {{ han(idx + 1) }}、
                <span class="classify">{{ item.type }}</span>
              </div>
              <div class="clearfix">
                <div
                  class="answer-chunk"
                  :class="
                    item2.myAnswers || item2.myAnswers == '0' ? 'act2' : ''
                  "
                  v-scrollTo="`#que${idx}${idx2}`"
                  v-for="(item2, idx2) in item.list"
                  :key="idx2"
                >
                  {{ idx2 + 1 }}
                </div>
              </div>
              <!-- <div class="questions-item">
                                <radioT :item="item2" v-for="(item2, idx) in item.list"></radioT>
              </div>-->
            </div>
          </div>

          <div class="sunbmit" style v-if="!isdetail">
            <el-button
              style="width: 100px"
              @click="updateExam(false)"
              type="warning"
              >暂存</el-button
            >
            <el-button
              style="width: 100px"
              @click="submitExam(false)"
              type="primary"
              >提交</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import radioT from "./components/radio";
import tiankong from "./components/tiankong";
import request from "@/utils/request";
import radiod from "./components/radiod";

import determine from "./components/determine";
import answers from "./components/answers";

export default {
  data() {
    return {
      detailData: {},
      actNum: 0,

      taskId: "",
      list: [
        {
          type: "单选题",
          fen: "5",
          list: [],
        },

        {
          type: "多选题",

          fen: "5",
          list: [],
        },

        {
          type: "判断题",

          fen: "5",
          list: [],
        },
        {
          type: "填空题",

          fen: "5",
          list: [],
        },
        {
          type: "问答题",

          fen: "5",
          list: [],
        },
      ],
      timer: null,
      time: "00:00:00",
      isdetail: false,
    };
  },
  components: {
    radioT,
    tiankong,
    radiod,
    determine,
    answers,
  },
  created() {
    this.taskId = this.$route.query.taskId;

    this.isdetail = this.$route.query.isdetail == 1 ? true : false;
    this.getExamRecordDetail();
  },
  computed: {},
  methods: {
    setTime() {
      var total = this.detailData.examLength * 60;

      var oldTime = Math.floor(
        (new Date().getTime() - this.detailData.examTask.startTime) / 1000
      );

      if (oldTime > total) {
        this.$message.info("时间超时！自动交卷");
        this.submitExam(true);
      }
      var s = total - oldTime;
      if (!this.timer) {
        this.timer = setInterval(() => {
          s = s - 1;
          if (s == 0) {
            this.submitExam(true);
          }
          this.stomin(s);
        }, 1000);
      }
    },

    format(p) {
      return this.actNum ===
        this.detailData.examTask.temsexamtaskresultList.length
        ? "已完成"
        : `${this.actNum}/${this.detailData.examTask.temsexamtaskresultList.length}`;
    },
    stomin(sec) {
      var hours = Math.floor(sec / 3600);
      var minutes = Math.floor((sec - hours * 3600) / 60);
      var seconds = sec % 60;

      this.time = [hours, minutes, seconds]
        .map((num) => (num < 10 ? "0" + num : num.toString()))
        .filter((num) => num)
        .join(":");
    },
    toscroll() {},
    goback() {
      this.$router.go(-1);
    },
    changeres() {
      this.$forceUpdate();
      this.$nextTick(() => {
        this.actNum = document.getElementsByClassName("act2").length;
      });
    },
    //处理数据结构
    changeList(arr) {
      arr.forEach((el) => {
        if (el.questionType == "selectTi") {
          el.type = "单选题";
          el.options = JSON.parse(el.options);
          this.list[0].list.push({ ...el });
        } else if (el.questionType == "multiple") {
          el.type = "多选题";
          el.options = JSON.parse(el.options);
          this.list[1].list.push({ ...el });
        } else if (el.questionType == "determine") {
          el.type = "判断题";
          el.options = JSON.parse(el.options);
          this.list[2].list.push({ ...el });
        } else if (el.questionType == "blank") {
          el.type = "填空题";
          this.list[3].list.push({ ...el });
        } else if (el.questionType == "answers") {
          el.type = "问答题";
          this.list[4].list.push({ ...el });
        }
      });

      this.list = this.list.filter((el) => {
        return el.list.length != 0;
      });
    },
    han(v) {
      if (v == 1) {
        return "一";
      } else if (v == 2) {
        return "二";
      } else if (v == 3) {
        return "三";
      } else if (v == 4) {
        return "四";
      } else if (v == 5) {
        return "五";
      } else if (v == 6) {
        return "六";
      }
    },
    timestampToDateTime(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的
      const day = ("0" + date.getDate()).slice(-2);
      const hours = ("0" + date.getHours()).slice(-2);
      const minutes = ("0" + date.getMinutes()).slice(-2);
      const seconds = ("0" + date.getSeconds()).slice(-2);

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    getExamRecordDetail() {
      request({
        url: "/api/exam/TemsExam/ExamDetail/" + this.taskId,
        method: "POST",
      }).then((res) => {
        this.detailData = res.data;
        this.changeList(this.detailData.examTask.temsexamtaskresultList);
        this.loading = false;
      });
    },
    handleClick() {},
  },
};
</script>

<style lang="scss" scoped>
.exam-detail {
  background-color: #eff1f4;
  padding-bottom: 80px;

  .content {
    width: 1230px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;

    .letter {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      margin-right: 20px;
      border: 1px solid #ddd;
    }
  }

  .head {
    text-align: center;
    padding: 36px 0;
    background-color: #fff;

    h1 {
      color: #333;
      font-size: 40px;
      font-weight: 700;
      margin-bottom: 16px;
      line-height: 50px;
      min-height: 50px;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      overflow: hidden;
    }

    p {
      color: #555;
      font-size: 14px;
      margin: 0;
      line-height: 18px;
      padding: 2px 0;

      span {
        padding: 0 12px;
        border-right: 1px solid #bbb;
      }

      span:last-child {
        border-right: none;
      }
    }

    h1 {
      color: #333;
      font-size: 40px;
      font-weight: 700;
      margin-bottom: 16px;
      line-height: 50px;
      min-height: 50px;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}

.questionsList {
  width: 894px;
  // margin: 0 auto;

  .headline {
    line-height: 68px;
    color: #202020;
    font-size: 20px;
  }

  .questions-item {
    font-size: 16px;
    padding: 24px 24px 8px 24px;
    background-color: #fff;
    margin-bottom: 16px;

    .title {
      font-size: 18px;
      line-height: 1.7;
      color: #202020;
      margin: 16px 0;
    }

    .opt-item {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: row;
      font-size: 16px;
      margin-bottom: 16px;
      line-height: 28px;
      cursor: pointer;

      .letter {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        margin-right: 20px;
        border: 1px solid #ddd;
      }
    }
  }
}

.sidebar {
  position: sticky;
  top: 24px;
  width: 310px;
  padding-top: 24px;
  // position: relative;
  height: 100%;

  .topTime {
    background-color: #fff;
    padding: 14px;
    margin-bottom: 16px;
    text-align: center;
  }

  .dati {
    text-align: center;
    background-color: #fff;
    padding: 20px 16px;
    margin-top: 20px;
  }

  .jindu {
    padding: 20px 0;
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    // flex-direction: row;
  }

  .shiyi {
    padding-bottom: 20px;
    font-size: 16px;
    color: #333;
    display: flex;
    justify-content: space-around;
    align-items: unset;
    flex-direction: row;

    .shiItem {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: row;

      span {
        width: 16px;
        height: 16px;
        margin-right: 4px;
        border-radius: 2px;
      }
    }

    .shiItem1 {
      span {
        background-color: #447dff;
      }
    }

    .shiItem2 {
      span {
        border: 1px solid #999;
      }
    }

    .shiItem3 {
      span {
        border: 1px solid #999;
        position: relative;
        overflow: hidden;
      }

      span::after {
        content: "";
        position: absolute;
        bottom: -10px;
        right: -10px;
        width: 20px;
        height: 20px;
        background-color: #f65464;
        transform: rotate(45deg);
      }
    }
  }

  .sheet-list {
    height: calc(100vh - 420px);
    max-height: 400px;
    overflow-y: auto;

    .headline {
      font-size: 16px;
      color: #333;
      line-height: 26px;
      margin-bottom: 8px;
      text-align: left;
    }

    .clearfix {
      font-size: 16px;
      color: #333;
      line-height: 26px;
      margin-bottom: 8px;

      .answer-chunk {
        float: left;
        width: 36px;
        height: 40px;
        overflow: hidden;
        border-radius: 2px;
        border: 1px solid #999;
        cursor: pointer;
        margin-right: 14px;
        margin-bottom: 14px;
        color: #999;
        font-size: 18px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
      }

      .act2 {
        border-color: #266fff !important;
        color: #fff !important;
        background-color: #266fff !important;
      }
    }
  }

  // .sunbmit {
  // }
}
</style>
